<template>
	<view class="qians ltr">
		<view v-for="(item,index) in days" class="qian "  :class="{'today':(today==item.day),'active':(items[item.date])}">
			<view class="qiana ">{{item.dayNum}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			items:{
				type:Object,
				default:{}
			}
		},
		data() {
			var d=new Date()
			return {
				days: [],
				today:(d.getMonth() + 1) + "." + d.getDate()
			}
		},
		mounted: function() {
			console.log("OnLoad")
			this.getDays();
		},
		methods: {
			getDays: function() {
				var arr = []
				var d = new Date();
				d.setDate(1)
				var day = (d.getDay() - 1)
				d.setDate(d.getDate() - day)
				arr.push({
					day: (d.getMonth() + 1) + "." + d.getDate(),
					name: (d.getMonth() + 1) + "" + d.getDate(),
					date: d.getFullYear() + '-' + (d.getMonth() + 1) + "-" + d.getDate()
				})
				var time = d.getTime()
				for (let index = 0; index < 34; index++) {
					d.setDate(d.getDate() + 1)
					arr.push({
						dayNum: d.getDate(),
						day: (d.getMonth() + 1) + "." + d.getDate(),
						name: (d.getMonth() + 1) + "" + d.getDate(),
						date: d.getFullYear() + '-' + (d.getMonth() + 1) + "-" + (d.getDate()<10?0+''+d.getDate():d.getDate())
					})
				}
				console.log(arr)
				this.days = arr;
			}
		}
	}
</script>

<style>
	.qians {
		display: flex;
		flex-wrap: wrap;
	}

	.qians .qian {
		width: 14.2%;
		text-align: center;

	}

	.qians .qian.active {
		background-color: #006DDD;
		color: #FFFFFF;
	}

	.qians .qian .qiana {
		font-size: 12px;
		height: 40px;
		align-items: center;
		justify-content: center;
		line-height: 40px;
	}

	.qians .qian .text {
		font-size: 12px;
		color: #00000070;
	}
	.today{
		background-color: #006ddd24;
	}
</style>
